Components

Button Groups

You can group buttons together to create a navigation bar.

BaseBase › DefaultBase › Default DisabledBase › More IconBase › More Icon OpenBase › More Icon DisabledBase › InverseBase › Inverse DisabledBase › Inverse More Icon DisabledBasedev ready

Preview

Code

<div class="slds-button-group" role="group">
  <button class="slds-button slds-button--neutral">Refresh</button>
  <button class="slds-button slds-button--neutral">Edit</button>
  <button class="slds-button slds-button--neutral">Save</button>
</div>

If the last button is wrapped in another element (for example, a div holding a dropdown menu), place the .slds-button--last class on the wrapping element instead.

For the inverse version of the button group, use the .slds-button--inverse class.

Note: The inverse group is seen on the edit dashboard. The disabled attribute might not be applicable in this situation.

Icon GroupIcon Group › DefaultIcon Group › SelectedIcon Groupdev ready

Preview

Code

<div class="slds-button-group" role="group">
  <button class="slds-button slds-button--icon-border" title="Charts">
    <svg aria-hidden="true" class="slds-button__icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
    </svg>
    <span class="slds-assistive-text">Charts</span>
  </button>
  <button class="slds-button slds-button--icon-border" title="Filter List">
    <svg aria-hidden="true" class="slds-button__icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
    </svg>
    <span class="slds-assistive-text">Filter List</span>
  </button>
  <button class="slds-button slds-button--icon-more" aria-haspopup="true" title="More Actions">
    <svg aria-hidden="true" class="slds-button__icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
    </svg>
    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--x-small">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">Settings</span>
  </button>
</div>

An icon group is primarily used in the anchor of a page that can change views or be sorted. It usually contains stateful icon buttons.

Component Overview

Buttons in a group are surrounded by a parent with the .slds-button-group class. If the last button is an icon, like the down triangle, use the .slds-button--icon-border-filled class when accompanying a .slds-button--neutral group.

If the last button in a group needs to be wrapped in another element (for example, a drop-down trigger), add the .slds-button--last class to the wrapper element to create proper spacing and borders.

Accessibility

Include the Aria role role="group" so that assistive technologies are alerted to the grouping.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create button-groups.
Class NameUsage
.slds-button-group
Applied to:

div

Outcome:

Initializes a grouped set of buttons

Required:

Required

Comments:

Changes the rounding and borders of buttons within to look like a group

.slds-button--last
Applied to:

button wrapper

Outcome:

Identifies the last button when wrapped in another element

Required:

No, optional element or modifier

Comments:

Only required if the .slds-button is wrapped. ie- to include a dropdown

.slds-toggle-visibility
Deprecated
Applied to:

.slds-button

Outcome:

Identifies the last icon button when it should be hidden when `[disabled]`

Required:

No, optional element or modifier

Comments:

No longer required since the icon button should simply appear disabled instead of being hidden